import React, { memo, useState } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux";

import { PER_PAGE_NUMBER } from "../../store/constants";
import { getSongCategoryListAction } from "../../store/actionCreators";

import HYThemeCover from "@/components/theme-cover";
import HYPagination from "@/components/pagination";

import { SongListWrapper } from "./style";

export default memo(function HYSongsList() {
  const [currentPage, setCurrentPage] = useState(1);

  const { categorySongs } = useSelector(
    (state) => ({
      categorySongs: state.getIn(["songs", "categorySongs"]),
    }),
    shallowEqual
  );
  const songLists = categorySongs.playlists || [];
  const total = categorySongs.total || 0;
  const dispatch = useDispatch();
  
  const onPageChange = (page) => {
    setCurrentPage(page);
    dispatch(getSongCategoryListAction(page));
  }

  return (
    <SongListWrapper>
      <div className="songs-list">
        {songLists.map((item, index) => {
          return <HYThemeCover info={item} key={item.id} right="30px" />;
        })}
      </div>
      <HYPagination
        currentPage={currentPage}
        total={total}
        pageSize={PER_PAGE_NUMBER}
        onPageChange={onPageChange}
      />
    </SongListWrapper>
  );
});
